"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { BlogPostCard } from "@/components/blog/blog-post-card"
import { useLanguage } from "@/context/language-context"

export default function BlogPage() {
  const { dictionary } = useLanguage()

  const blogPosts = [
    {
      title: dictionary.blogPost1Title,
      date: dictionary.blogPost1Date,
      excerpt: dictionary.blogPost1Excerpt,
      link: "#", // Placeholder link
    },
    {
      title: dictionary.blogPost2Title,
      date: dictionary.blogPost2Date,
      excerpt: dictionary.blogPost2Excerpt,
      link: "#", // Placeholder link
    },
    {
      title: dictionary.blogPost3Title,
      date: dictionary.blogPost3Date,
      excerpt: dictionary.blogPost3Excerpt,
      link: "#", // Placeholder link
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-1 py-12 md:py-20 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-4 md:px-6">
          <h1 className="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900 dark:text-gray-50">
            {dictionary.latestBlogPosts}
          </h1>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogPosts.map((post, index) => (
              <BlogPostCard key={index} title={post.title} date={post.date} excerpt={post.excerpt} link={post.link} />
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
